<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<title>MC Validation Demo</title>
	
	<!-- IE 5 doesn't support array.push() -->
	<script src="http://4umi.com/web/javascript/array.js" type="text/javascript"></script>
	
	<script src="mc-validation.js" type="text/javascript"></script>
	
	<script type="text/javascript" language="Javascript">
	var val;
	function checkForm(obj) {
		if (!val) {
			val = new MC_Validation(obj, 'inline');
			val.setClass('error');
			val.setMsgArea('msg_area');
			//val.setShowMsgs(false);
			
			val.addRules('field_1', 'isNotEmpty', 'Please enter your name.');
			val.addRules('field_2', 'isNotEmpty|validPhone', 'Error on field with multiple rules.');
			val.addRules('field_3', 'validZip');
			val.addRules('field_4', 'validEmail', 'No, no, no. Enter your REAL email address.');
			val.addRules('field_5', 'alpha');
			val.addRules('field_6', 'alnum');
			val.addRules('field_7', 'digits');
			val.addRules('field_8', 'custom');
			val.addRules('field_8', 'alpha', 'false');
			val.addRules('field_9', 'optionSelected');
			val.addRules('field_10', 'radioSelected');
			val.addRules('field_11', 'checkboxSelected');
			val.addRules('field_12', 'min_length[4]');
			val.addRules('field_13', 'max_length[8]');
			val.addRules('field_14', 'exact_length[12]');
			val.addRules('field_15', 'matches[field_1]');
		}
		return val.validate();
	}

	function custom(element) {
		return 'Custom field not right!';
	}
	</script>
	
	<style type="text/css">
	#msg_area .error {
		border: solid 2px #892820;
		margin: 3px 0;
		padding: 3px;
		background: #EA6C64
	}

	.error {
		border: solid 2px #f00;
	}
	</style>
</head>
<body>
	
<h1>MC Validation Demo</h1>
	
<!-- This is where error messages are displayed when message type is set to 'inline' -->
<div id="msg_area"></div>

<form action="#" method="post" onSubmit="return checkForm(this);">
<table>
	<tr>
		<td><label for="field_1">Required</label></td>
		<td><input type="text" id="field_1" name="field_1" /></td>
	</tr><tr>
		<td><label for="field_2">Phone</label></td>
		<td><input class="test1 test2" type="text" id="field_2" name="field_2" /></td>
	</tr><tr>
		<td><label for="field_3">Zip</label></td>
		<td><input class="test3" type="text" id="field_3" name="field_3" /></td>
	</tr><tr>
		<td><label for="field_4">Email</label></td>
		<td><input type="text" id="field_4" name="field_4" /></td>
	</tr><tr>
		<td><label for="field_5">Alpha</label></td>
		<td><input type="text" id="field_5" name="field_5" /></td>
	</tr><tr>
		<td><label for="field_6">Alpha-numeric</label></td>
		<td><input type="text" id="field_6" name="field_6" /></td>
	</tr><tr>
		<td><label for="field_7">Numeric</label></td>
		<td><input type="text" id="field_7" name="field_7" /></td>
	</tr><tr>
		<td><label for="field_8">Custom</label></td>
		<td><input type="text" id="field_8" name="field_8" /></td>
	</tr><tr>
		<td><label for="field_9">Select</label></td>
		<td>
			<select id="field_9" name="field_9">
				<option>Choose one</option>
				<option>Option 1</option>
				<option>Option 2</option>
				<option>Option 3</option>
			</select>
		</td>
	</tr><tr>
		<td><label for="field_10">Radio</label></td>
		<td>
			<input type="radio" id="field_10" name="field_10" value="1"/> 1<br />
			<input type="radio" name="field_10" value="2" /> 2<br />
			<input type="radio" name="field_10" value="3" /> 3
		</td>
	</tr>
	<tr><td><label for="field_11">Checkbox</label></td>
		<td><input type="checkbox" id="field_11" name="field_11" value="1" /></td>
	</tr><tr>
		<td><label for="field_12">Min Length</label></td>
		<td><input type="text" id="field_12" name="field_12" /></td>
	</tr><tr>
		<td><label for="field_13">Max Length</label></td>
		<td><input type="text" id="field_13" name="field_13" /></td>
	</tr><tr>
		<td><label for="field_14">Exact Length</label></td>
		<td><input type="text" id="field_14" name="field_14" /></td>
	</tr><tr>
		<td><label for="field_15">Matches</label></td>
		<td><input type="text" id="field_15" name="field_15" /></td>
	</tr><tr>
		<td></td>
		<td><input type="submit" value="Submit!" /></td>
	</tr>
</table>
</form>

</body>
</html>
